<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="./assets/fonts/helvetica-neue.css?v123">
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <link rel="stylesheet" href="./style.css">
  <style>.on-load {
    display: none
  }

  .spinner-grow {
    color: #343a40 !important;
    display: inline-block;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: spinner-grow .75s linear infinite;
    animation: spinner-grow .75s linear infinite;
    width: 100px;
    height: 100px;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
  }

  .github-button {
    color: transparent;
  }
  </style>
  <style>
    .cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
      padding: 8px;
      background: rgb(244, 244, 244);
      border: none;
      border-radius: 4px;
    }

    .cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
      outline: none;
    }

    .cloudimage-360 .cloudimage-360-prev {
      display: none;
      position: absolute;
      z-index: 100;
      top: calc(50% - 15px);
      left: 20px;
    }

    .cloudimage-360 .cloudimage-360-next {
      display: none;
      position: absolute;
      z-index: 100;
      top: calc(50% - 15px);
      right: 20px;
    }

    .cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      background: 50% 50% / cover no-repeat;
    }

    .cloudimage-360 .cloudimage-360-prev:before {
      background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
    }

    .cloudimage-360 .cloudimage-360-next:before {
      background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
    }

    .cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
      opacity: 0.4;
      cursor: default;
    }
  </style>
  <title>JS-cloudimage-360-view home addition</title>
</head>

<body>
<!-- simply iniatialize it with class name "cloudimage-360", server folder path, file name and amount of images -->
<div id="spinner" class="spinner-grow text-dark" role="status"></div>

<section id="main" class="wrapper" style="visibility: hidden;overflow: hidden;">
  <section class="home">
    <div class="container">
      <a class="logo" href="https://scaleflex.github.io/js-cloudimage-360-view/">js-cloudimage-360-view</a>
      <div style="margin-top: 10px;">
        <a class="github-button" target="_blank"
           href="https://github.com/Scaleflex/js-cloudimage-360-view/subscription" data-icon="octicon-eye"
           aria-label="Watch Scaleflex/js-cloudimage-360-view on GitHub">Watch</a>
        <a class="github-button" target="_blank" href="https://github.com/Scaleflex/js-cloudimage-360-view"
           data-show-count="true" data-icon="octicon-star" aria-label="Star Scaleflex/js-cloudimage-360-view on GitHub"
        >Star</a>
        <a class="github-button" target="_blank" href="https://github.com/Scaleflex/js-cloudimage-360-view/fork"
           data-icon="octicon-repo-forked" aria-label="Fork Scaleflex/js-cloudimage-360-view on GitHub">Fork</a>
        <a class="twitter-share-button btn btn-info" target="_blank"
           href="https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage">
          <i> </i>
          <span>Tweet</span>
        </a>
        <!--<a class="github-button" href="https://github.com/Scaleflex/filerobot-uploader/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download Scaleflex/filerobot-uploader on GitHub">Download</a>-->
      </div>
      <h1>Show every detail from any angle</h1>
      <h2>Home addition: Outdoor view</h2>


      <div class="actions-wrapper">
        <a
           id="view-github-btn"
           href="https://github.com/scaleflex/js-cloudimage-360-view"
           class="btn btn-primary"
           target="_blank"
        >View on GitHub</a>
        <a
           href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html"
           class="btn btn-light"
           target="_blank"
        >Edit on CodeSandbox</a>
        <!--<a href="#" class="btn btn-light btn-lg">Read on Medium</a>-->
      </div>
    </div>

    <a href="https://github.com/scaleflex/js-cloudimage-360-view" target="_blank">
      <img
         class="fork-me-on-github"
         src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
         alt="Fork me on GitHub">
    </a>

    <a href="https://www.filerobot.com/" class="robot-icon">
      <img style="width:100%;" id="robot-icon"
           src="https://demo.cloudimg.io/width/800/q35.foil1/https://cdn.scaleflex.it/filerobot/assets/robot-icon-left.png"
           alt="">
    </a>
  </section>

  <section>
    <div
       class="cloudimage-360"
       data-folder="https://cdn.scaleflex.it/demo/outdoor/"
       data-filename="00_Haus_000{index}.jpg"
       data-amount="30"
       data-magnifier="3"
       data-responsive="scaleflex"
       data-ratio="0.5"
       data-stop-at-edges
       data-spin-reverse
       data-control-reverse
    >
      <button class="cloudimage-360-prev"></button>
      <button class="cloudimage-360-next"></button>
    </div>
  </section>
</section>

<section style="text-align: center;">
  <div class="container ready-to-start">
    <h2>Any questions?</h2>
    <p>
      Contact us at <a href="mailto:hello@cloudimage.io">hello@cloudimage.io</a>, our experts will be happy to help!
    </p>
  </div>
</section>

<footer>
  <div style="background: #fff">
    <section class="container ready-to-start filerobot-ui-family">
      <div class="row">
        <div class="col-sm-3 filerobot-ui-family-label" style="max-width: 200px; min-width: 200px;">
          <h5>Filerobot UI family:</h5>
        </div>
        <div class="col-sm-9 filerobot-ui-family-libs" style="max-width: calc(100% - 200px);">
          <ul>
            <li><a target="_blank" href="https://github.com/scaleflex/react-cloudimage-responsive">JS Cloudimage
              Responsive</a></li>
            <li><a target="_blank" href="https://github.com/scaleflex/react-cloudimage-responsive">React Cloudimage
              Responsive</a></li>
            <li><a target="_blank" href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage
              Responsive</a></li>
            <li><a target="_blank" href="https://github.com/scaleflex/filerobot-uploader">Uploader</a></li>
            <li><a target="_blank" href="https://github.com/scaleflex/filerobot-image-editor">Image Editor</a></li>
          </ul>
        </div>
      </div>
    </section>
  </div>
  <hr/>
  <div class="copyright">
    <div class="container">
      <div class="row">
        <div class="team-desc col-sm-8">
          <div>Made with ❤ in 2019 in Paris, Munich and Sofia by the Scaleflex team, the guys behind <a
             href="https://www.cloudimage.io/en/home" target="_blank">Cloudimage.io</a>.
          </div>
          <div style="margin-top: 10px;">Powered by <a href="https://www.scaleflex.it/en/home" target="_blank">Scaleflex
            team</a>.
            All rights reserved.
          </div>
        </div>
        <div class="footer-menu col-sm-4">
          <ul>
            <li><a href="https://github.com/scaleflex/js-cloudimage-360-view" target="_blank">View GitHub</a></li>
            <li><a href="https://github.com/scaleflex/js-cloudimage-360-view/issues" target="_blank">Current
              Issues</a>
            </li>
            <li><a href="https://github.com/scaleflex/js-cloudimage-360-view#table-of-contents" target="_blank">Documentation</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>


<!-- Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag -->
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.1.0/js-cloudimage-360-view.min.js"></script>
<!--<script src="../../build/js-cloudimage-360-view.min.js"></script>-->
<script>
  const spinner = document.getElementById('spinner');
  const wrapper = document.getElementById('main');

  wrapper.classList.add('active');
  spinner.style.display = 'none';
</script>
</body>
</html>
